<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>夏令营报名</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body{
      position: relative;
      height: 100%;
    }
    body{
      background-color: #4fe094;
    }

    img {
      display: block;
      width: 100%;
      border: none;
    }

    .bottom {
      position: absolute;
      width: 100%;
      bottom: 0;
    }
    .info{
      position: absolute;
      width: 100%;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
    .container{
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      height: 100%;
      width: 100%;
    }
    .flex{
      font-size: 14px;
      text-align: center;
      height: 30px;
      line-height: 30px;
    }
    #btn{
      position: absolute;
      bottom: 0;
      transform: translateY(150%);
    }
  </style>
</head>

<body onload="init()">

  <img src="images/activity-3.jpg" alt="">
  <div class="info">
    <div class="container">
      <div class="flex">家长姓名：<input type="text"></div>
      <div class="flex">联系电话：<input type="text"></div>
      <div class="flex">孩子姓名：<input type="text"></div>
      <div class="flex">支付金额：<span style="color: #f40;">0.01</span></div>
    </div>
    <img src="images/activity-5.png" alt="">
    <img id="btn" src="images/activity-6.png" alt="">
  </div>
  <img class="bottom" src="images/activity-4.png" alt="">
  <!-- <img class="bottom" src="images/activity-2.png" alt="">
  <div id="btn"></div> -->
  <!-- <img src="images/activity-2.jpg" alt="">
  <img src="images/activity-3.jpg" alt=""> -->
  <!-- <div id="img_btn">
    <div id="btn"></div>
    <img src="images/activity-4.jpg" alt="">
  </div> -->

  <script src="plugins/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script>

    const appid = 'wx6faabee0fed31263';

    function init() {
      const code = getUrlParam('code');
      if (code) {
        pay(code);
      }
    }

    function onBridgeReady(params) {
      // alert(JSON.stringify(params))
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        params,
        //   {
        //   "appId": params.appId,     //公众号ID，由商户传入     
        //   "timeStamp": Date.now(),         //时间戳，自1970年以来的秒数     
        //   "nonceStr": params.nonceStr, //随机串     
        //   "package": params.package,
        //   "signType": "MD5",         //微信签名方式：     
        //   "paySign": params.paySign //微信签名 
        // },
        function (res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {

          }
        });
    }




    function setCode() {
      // alert(location.href)
      let index = -1;
      let href = '';
      if((index = location.href.indexOf('?')) > -1){
        href = encodeURIComponent(location.href.substring(0, index));
      }else{
        href = encodeURIComponent(location.href);
      }
      // alert(location.href)
      // const href = encodeURIComponent(location.href.substring(0, ));
      const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${href}&response_type=code&scope=snsapi_base#wechat_redirect`
      // location.replace(url)
      window.location.href = url;
    }

    function getUrlParam(name) {
      const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
      const r = location.search.substring(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null
    }

    function pay(code) {
      let url = ` http://guoyi.cloudgather.com.cn/oac/order/pay?code=${code}&productId=123`;
      $.get(url).then(res => {
        // alert(JSON.stringify(res));
        const { data, code, msg } = res;
        if (code === 200) {
          const { appId, sign, nonceStr, prepayId, timeStamp, signType } = data;
          onBridgeReady({
            appId,
            paySign: sign,
            nonceStr,
            package: `prepay_id=${prepayId}`,
            timeStamp,
            signType
          })
        } else {
          alert(msg || '获取code错误')
        }
      })
    }



    $('#btn').on('click', function () {
      // const code = getCode();
      // // alert(code)
      // if (code) {
      //   pay(code);
      // } else {
        setCode();
      // }
    })
  </script>
</body>

</html>